<template>
  <div class="home">
    <Top></Top>
    <!-- top -->
    <div class="header gap-[10px] flex-wrap">
      <div class="left" style="flex: 1">
        <div class="df">
          <div class="t1"></div>
          <div class="p">常用功能</div>
        </div>
        <div class="df" style="width: 60%">
          <!-- 信息发布 -->
          <template v-for="(item, index) in Menus" :key="index">
            <div
              class="mar"
              @click="to1(item)"
              v-if="selected?.includes(item.key + item.path)"
            >
              <img :src="item.img" />
              <div class="mt-[20px] w64">{{ item.name }}</div>
            </div>
            <!-- <div class="mar" v-if="xxfb" @click="to1()">
              <img src="../../../assets/img/xinxi.png" />
              <div class="mt-[20px] w64">信息发布</div>
            </div> -->
          </template>

          <!-- 添加常用功能 -->
          <div class="mar" @click="drawer2 = true">
            <img src="../../../assets/img/常用x.png" />
            <div class="mt-[20px]" style="width: 100px">添加常用功能</div>
          </div>
        </div>
      </div>

      <div class="right" style="flex: 1; gap: 10px">
          <div class="right1 flex-auto">
            <div class="df">
              <div class="t1"></div>
              <div class="p">客服信息</div>
            </div>
            <div>
              <div class="df px-[30px] py-[20px]">
                <div>
                  <div class="text-[14px] ch" style="width: 122px">
                    客服代表：<span class="black">{{ kefu?.nickname }}</span>
                  </div>
                  <div class="mt-[10px] text-[14px] ch" style="width: 180px">
                    客服电话：<span class="black">{{ kefu?.mobile }}</span>
                  </div>
                  <div class="mt-[10px] text-[14px] ch" style="width: 180px">
                    投诉电话：<span class="black">{{ kefu?.tsdh }}</span>
                  </div>
                </div>
                <!-- 二维码 -->
                <div class="mt-[-20px] ml-[20px]">
                  <img
                    :src="'https://api.6ocbx.com' + kefu.kfvx_image"
                    alt=""
                    style="width: 80px; height: 80px; margin-right: 29px"
                  />
                  <div style="margin-top: 10px; font-size: 14px; color: #333">
                    扫描添加专属客服
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right2 flex-auto">
            <div class="df">
              <div class="t1"></div>
              <div class="p">会员信息</div>
            </div>

            <!-- 会员信息 -->
            <div class="Da">
              <div class="le">
                <img src="../../../assets/img/v2x.png" style="" />
              </div>
              <div class="ri">
                <div>
                  <span class="ch mr-[8px]">会员级别:</span>
                  <span class="text-[#333]">{{ getLevelName(user?.level_id) }}</span>
                  <span style="color: #6675ff" @click="to"> 升级会员</span>
                </div>
                <div class="mt-[20px] mb-[20px]">
                  <span class="ch mr-[8px]">开通时间:</span>
                  <span class="text-[#333]">{{
                    user.vipstart_time ? getDate(user.vipstart_time) : "--"
                  }}</span>
                </div>
                <div>
                  <span class="ch mr-[8px]">截止时间: </span>
                  <span class="text-[#333]">{{
                    user.expiration_time ? getDate(user.expiration_time) : "--"
                  }}</span>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>

    <!-- 工作简报 -->
    <div class="work">
      <div class="df">
        <div class="t1"></div>
        <div class="p">工作简报</div>
        <div class="mt-[20px] ml-[20px]">
          <div class="demo-date-picker">
            <div class="block">
              <span class="demonstration"></span>
              <a-range-picker
                v-model:value="time"
                :allowClear="false"
                :disabled-date="disabledDate"
              />
            </div>
          </div>
        </div>
        <!-- <div class="mt20 ml10" style="color: #ff4848">（注：日期默认当月）</div> -->
      </div>
      <!-- 图片 -->
      <div class="df">
        <div class="tiao">
          <p class="mt-[20px] ml-[20px]">标讯查看量（条）</p>
          <p class="mt-[30px] ml-[20px] size">{{ work?.bx_num || 0 }}</p>
        </div>
        <div class="jia">
          <p class="mt-[20px] ml-[20px]">公司查看量（家）</p>
          <p class="mt-[30px] ml-[20px] size">{{ work?.company_num || 0 }}</p>
        </div>
        <div class="ci">
          <p class="mt-[20px] ml-[20px]">数据导出（次）</p>
          <p class="mt-[30px] ml-[20px] size">{{ work?.export_num || 0 }}</p>
        </div>
        <div class="ding">
          <p class="mt-[20px] ml-[20px]">标讯订阅量（条）</p>
          <p class="mt-[30px] ml-[20px] size">
            {{ work?.subscription_num || 0 }}
          </p>
        </div>
        <div class="sc">
          <p class="mt-[20px] ml-[20px]">标讯收藏量（条）</p>
          <p class="mt-[30px] ml-[20px] size">
            {{ work?.collection_num || 0 }}
          </p>
        </div>
      </div>
    </div>

    <!-- echarts -->
    <div class="df">
      <div class="bottom">
        <div class="df">
          <div class="t1"></div>
          <div class="p">订阅标讯数</div>
        </div>
        <div id="main" style="width: 95%; height: 90%"></div>
      </div>
      <div class="bottom1">
        <div class="df">
          <div class="t1"></div>
          <div class="p">项目处理状态</div>
        </div>
        <!-- 右侧图标 -->
        <div
          id="miright"
          style="width: 90%; height: 70%; margin-top: 90px"
        ></div>
      </div>
    </div>

    <!-- 弹出框 -->
    <el-drawer v-model="drawer2" title="" :size="drawe">
      <template #header>
        <div class="df2">
          <div class="t2"></div>
          <div class="p1">常用功能设置</div>
        </div>
      </template>
      <!-- 常用功能 -->
      <div class="use">
        <div class="userAdd">
          <!-- 头 -->
          <div class="add">已添加 ({{ selected.length }})</div>
          <!-- 内容 -->
          <div class="icon">
            <template v-for="(item, index) in Menus" :key="index">
              <div v-if="selected?.includes(item.key + item.path)">
                <img :src="item.img" alt="" />
                <p
                  style="width: 12px; height: 12px"
                  @click="remove(item.key + item.path)"
                >
                  <img src="../../../assets/img/-.png" alt="" />
                </p>
                <div
                  style="
                    font-size: 14px;
                    width: 100px;
                    margin-left: -20px;
                    margin-top: 10px;
                  "
                >
                  {{ item.name }}
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <!-- add -->
      <div class="add">
        <div style="margin: 20px 0 0 20px">功能</div>
        <div v-for="(item, index) in Menus" :key="index">
          <div
            class="mt-[20px] ml-[20px] df"
            style="justify-content: space-between"
          >
            <div>
              <img :src="item.img" class="imgIcon" />
              <span class="ml10 text-[14px]">{{ item.name }}</span>
            </div>

            <el-button
              v-if="!selected?.includes(item.key + item.path)"
              @click="add(item.key + item.path)"
              class="button_btn"
              style="
                margin-right: 20px;
                color: #6675ff;
                border: 1px solid #6675ff;
              "
            >
              添加
            </el-button>

            <el-button
              v-else
              @click="remove(item.key + item.path)"
              class="button_btn"
              style="margin-right: 20px; color: #f43107"
            >
              移除
            </el-button>
          </div>
          <div class="dibu"></div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUpdated, onUnmounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import "../../../assets/com/com.scss";
import * as echarts from "echarts";
import Top from "../../../components/workHearder/index.vue";
import Menus from "../menus.ts";
import {
  useCurrentMenuStore,
  useUserStore,
} from "../../../stores/menuStore.ts";
import {
  Staginguserindex_briefing,
  Staginguserindex_kf_info,
  Staginguserindex_use_list,
  Staginguserindex_use_add,
  Staginguserindex_collect,
  Staginguserindex_schedule,
  getDate,
  levelscomplete,
} from "../../../Api/work";
import { message } from "ant-design-vue";
import dayjs from "dayjs";
const userStore = useUserStore();

const user = computed(() => {
  return userStore.user;
});

const disabledDate = (current: Dayjs) => {
  return current && current > dayjs().endOf("day");
};

const router = useRouter();
const time = ref([]);
onMounted(() => {
  getCurrentDate();
});
// 弹出框
const drawer2 = ref(false);
const drawe = ref("650px");

const selected = ref<string[]>([]);

const add = (key: string) => {
  if (selected.value?.length == 6) {
    message.info("最多6个");
    return;
  }
  selected.value.push(key);
  Staginguserindex_use_add({
    common_use_json: selected.value,
  });
};

const remove = (key: string) => {
  selected.value = selected.value.filter((item) => item !== key);
  Staginguserindex_use_add({
    common_use_json: selected.value,
  });
};

const store = useCurrentMenuStore();

const to1 = (item) => {
  router.push(item.path);

  store.changeCurrentTitle(item.name, item.key);
};

const to = () => {
  router.push("/memberPayment");
};

const getCurrentDate = (): Array<string> => {
  let currentTimeRange = [] as Array<string>;
  const currentDate = new Date();

  // 获取当前月份
  const currentMonth = currentDate.getMonth() + 1; // 月份从 0 开始，所以需要加 1

  // 获取当前月份的起始时间
  const startTime = `${currentDate.getFullYear()}-${currentMonth
    .toString()
    .padStart(2, "0")}-01 00:00:00`;

  // 获取当前月份的终止时间
  const lastDay = new Date(
    currentDate.getFullYear(),
    currentMonth,
    0
  ).getDate();

  const endTime = `${currentDate.getFullYear()}-${currentMonth
    .toString()
    .padStart(2, "0")}-${lastDay.toString().padStart(2, "0")} 23:59:59`;
  currentTimeRange = [startTime, endTime];

  //返回当前月的起始 结束日期
  return currentTimeRange;
};
// , // 工作简报

const prepare = async () => {
  const now = dayjs();

  // 获取当前月份的第一天
  const startOfMonth = now.startOf("day");

  // 获取当前月份的最后一天
  const endOfMonth = startOfMonth.clone().subtract(30, "day").startOf("day");

  time.value = [startOfMonth, endOfMonth];

  const arr = await Promise.all([
    Staginguserindex_kf_info(), // 客服信息
    Staginguserindex_collect(), // 首页图表标讯收藏数
    Staginguserindex_schedule(), // 首页图表项目处理状态
    Staginguserindex_use_list(), // 首页常用功能列表
  ]);

  selected.value = JSON.parse(arr?.[3]?.data?.data?.common_use_json) || [];

  kefu.value = arr?.[0]?.data?.data;

  const l1 = arr?.[1]?.data?.data;
  const title = [];
  const value = [];
  for (const key in l1) {
    const val = l1[key];
    title.push(key);
    value.push(val?.[0]?.num);
  }
  l1Json.value = {
    title,
    value,
  };
  init();

  const l2 = arr?.[2]?.data?.data;

  const valArr = [];

  for (const key in l2) {
    const val = l2[key];
    const arr = [];
    arr.push(key);
    val?.forEach((p) => {
      arr.push(p?.num);
    });

    valArr.push(arr);
  }

  l2Json.value = valArr;
  console.log("l2Json.value", l2Json.value);

  init1();
};

const l1Json = ref({
  title: [],
  value: [],
});

const l2Json = ref([]);

const work = ref({});
watch(
  () => time.value,
  () => {
    getwork();
  }
);
const getwork = async () => {
  const res = await Staginguserindex_briefing({
    start_time: dayjs(time.value?.[0].format("YYYY-MM-DD 00:00:00")).unix(),
    end_time: dayjs(time.value?.[1].format("YYYY-MM-DD 23:59:59")).unix(),
  });

  work.value = res?.data?.data;
};
const levels = ref([]);
onMounted(async () => {
  const res = await levelscomplete();
  levels.value = res.data.data;
});

const getLevelName = (id) => {
  return levels.value.find((p) => p.id == id)?.name;
};
const kefu = ref({});
prepare();

// 左侧柱状图
function init() {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("main") as any);

  // 绘制图表
  let options = {
    backgroundColor: "#fff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "10%",
      right: "0%",
      left: "10%",
      bottom: "10%",
    },
    xAxis: [
      {
        type: "category",
        data: l1Json.value.title,
        axisLine: {
          lineStyle: {
            color: "#bcc2cc",
          },
        },
        axisLabel: {
          margin: 10,
          color: "#A9B1BE",
          textStyle: {
            fontSize: 14,
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        max: "60",
        min: "0",
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#C1C6CF",
          fontSize: 12,
          align: "right",
          padding: 30,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#A1A7B3",
          fontSize: 14,
        },

        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "##F43107",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            type: "dashed",
          },
        },
        scale: true, //自适应
      },
    ],
    series: [
      {
        type: "bar",
        data: l1Json.value.value,
        barWidth: "22px",
        barCategoryGap: "150%",
        itemStyle: {
          color: "#F43107",
          barBorderRadius: [2, 2, 0, 0],
        },
      },
    ],
  };

  // 渲染图表
  Chart.setOption(options as any);
  onUnmounted(() => {
    Chart.dispose();
  });

  // 自适应

  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart.resize();
  });
}
// 右侧柱状图
function init1() {
  // 基于准备好的dom，初始化echarts实例
  let Chart1 = echarts.init(document.getElementById("miright") as any);
  // 绘制图表
  const options1 = {
    legend: {},
    grid: {
      top: "10%",
      right: "0%",
      left: "10%",
      bottom: "10%",
    },
    tooltip: {
      trigger: "axis",
    },
    dataset: {
      source: [
        [
          "类别",
          "联系中",
          "已投标",
          "已合作",
          "已放弃",
          "不相关",
          "已中标",
          "未中标",
        ],
        ...l2Json.value,
      ],
    },
    xAxis: {
      type: "category",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: {
            type: "line",
      
            colorStops: [
              {
                offset: 0,
                color: "rgba(55, 66, 77, 0.2)",
              },
            ],
          },
          type: "solid",
          width: 100,
        },
      },
    },
    yAxis: [
      {
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#C1C6CF",
          fontSize: 12,
          align: "right",
          padding: 30,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#A1A7B3",
          fontSize: 14,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            type: "dashed",
          },
        },
        scale: true, //自适应
      },
    ],
    series: [
      { type: "bar", barWidth: 20 },
      { type: "bar", barWidth: 20 },
      { type: "bar", barWidth: 20 },
      { type: "bar", barWidth: 20 },
      { type: "bar", barWidth: 20 },
      { type: "bar", barWidth: 20 },
      { type: "bar", barWidth: 20 },
    ],
  };

  // 渲染图表
  Chart1.setOption(options1 as any);
  onUnmounted(() => {
    Chart1.dispose();
  });

  // 自适应

  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart1.resize();
  });
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  background-color: #eef0f6;
  // height: calc(100vh - 145px);
  .top {
    height: 60px;
    background: #ffffff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .btn {
      width: 114px;
      height: 30px;
      background: #f43107;
      border-radius: 4px;
      margin-left: 20px;
      border: 0;
    }
  }

  .header {
    width: 100%;
    padding: 10px;
    display: flex;
    .left {
      // width: 1018px;
      // width: 55%;
      height: 180px;
      background: #ffffff;
      opacity: 1;
    }
    .right {
      display: flex;
      .right1 {
        height: 180px;
        background: #ffffff;
      }
      .right2 {
        height: 180px;
        background: #ffffff;
        min-width: 300px;
        .Da {
          display: flex;
          font-size: 14px;
          .le {
            img {
              width: 90px;
              height: 72px;
              margin: 30px 10px 0 10px;
            }
          }
          .ri {
            margin-right: 20px;
            margin-top: 10px;
          }
        }
      }
    }
  }

  // 工作简报
  .work {
    margin-left: 10px;
    // width: 1750px;
    height: 216px;
    background: #ffffff;
    opacity: 1;
    border-radius: 0px;
    margin-right: 10px;

    .tiao {
      margin: 20px 0 0 20px;
      width: 13.75rem;
      height: 120px;
      background: url(../../../assets/img/5434.png) no-repeat;
      background-size: 100% 100%;
      color: #ffffff;
    }
    .jia {
      margin: 20px 0 0 20px;
      background: url(../../../assets/img/5435.png) no-repeat;
      background-size: 100% 100%;
      width: 12.625rem;
      color: #ffffff;
      height: 120px;
    }
    .ci {
      margin: 20px 0 0 20px;
      background: url(../../../assets/img/5436.png) no-repeat;
      background-size: 100% 100%;
      width: 12.625rem;
      color: #ffffff;
      height: 120px;
    }
    .ding {
      margin: 20px 0 0 20px;
      background: url(../../../assets/img/5437.png) no-repeat;
      background-size: 100% 100%;
      width: 12.5rem;
      color: #ffffff;
      height: 120px;
    }
    .sc {
      margin: 20px 0 0 20px;
      background: url(../../../assets/img/5439.png) no-repeat;
      background-size: 100% 100%;
      width: 12.625rem;
      color: #ffffff;
      height: 120px;
    }
  }

  .bottom {
    margin-left: 10px;
    width: 50%;
    height: 514px;
    background: #ffffff;
    opacity: 1;
    border-radius: 0px;
    margin-top: 10px;
  }
  .bottom1 {
    margin-left: 10px;
    width: 50%;
    height: 514px;
    background: #ffffff;
    opacity: 1;
    border-radius: 0px;
    margin-top: 10px;
    margin-right: 10px;
  }
}

.p {
  margin: 20px 0 0 6px;
  font-size: 16px;
}
.t1 {
  width: 4px;
  height: 16px;
  background: #f43107;
  opacity: 1;
  border-radius: 10px;
  margin: 20px 0 0 20px;
}

.p1 {
  margin: 0 0 0 6px;
  font-size: 1rem;
}
.t2 {
  width: 4px;
  height: 16px;
  background: #f43107;
  border-radius: 10px;
  margin: 0 0 0 20px;
}

.df2 {
  display: flex;
  align-items: center;
  height: 56px;
  border-bottom: 2px solid #dddddd;
}

// 公共边距
.mar {
  width: 60px;
  height: 60px;
  width: 10%;
  margin: 30px 0 0 50px;
  text-align: center;
  display: grid;
  justify-items: center;
  img {
    width: 60px;
    height: 60px;
    // margin-left: 2px;
  }
}

.mt2 {
  font-size: 14px;
}
.ch {
  color: #a9b1be;
}
.black {
  color: #333;
}
.size {
  font-size: 30px;
  font-weight: bold;
}

.el-drawer__title {
  width: 4px;
  height: 16px;
  background: #f43107;
  opacity: 1;
  border-radius: 10px;
}

:deep(.el-drawer__body) {
  margin: 0;
  padding: 0;
}
:deep(.el-drawer__header) {
  margin: 0;
  padding: 0;
}

.use {
  height: 138px;
  border-bottom: 10px solid #eeeeee;
  .userAdd {
    .add {
      margin: 20px 0 0 20px;
      height: 14px;
      font-size: 0.875rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }
    .icon {
      margin: 20px 0 0 20px;
      display: flex;
      width: 90%;
      div {
        width: 58px;
        height: 58px;
        margin: 0 20px;
        position: relative;
        text-align: center;
        p {
          position: absolute;
          top: -5px;
          right: -7px;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

// 添加
.add {
  // height: 75%;
  .imgIcon {
    width: 40px;
    height: 40px;
  }
  .button_btn {
    width: 52px;
    height: 24px;
    background: #ffffff;
    border: 1px solid #f43107;
    border-radius: 4px;
  }
  .button_btn1 {
    width: 52px;
    height: 24px;
    background: #ffffff;
    border: 1px solid #ff4848;
    color: #ff4848;
    border-radius: 4px;
  }
  .dibu {
    width: 100%;
    height: 1px;
    background: #dddddd;
    opacity: 1;
    border-radius: 0px;
    margin: 20px 0 0 20px;
  }
}
.w64 {
  width: 84px;
}
</style>
